<template>
	<div class="easyd-weixin-Box">

		<div class="search_box">
			<span class="screen" @click="searchAllAction"><!-- <i class="fa fa-filter"></i> -->全部</span>
			<input type="text" v-model="searchValue" placeholder="请输入校区名称" />
			<span class="search" @click="searchAction">搜索</span>
		</div>
		<div class="app_page_box" style="top: 45px;">
			<div class="app_page" style="padding-top: 0;">
				<div class="communication_list app_box_content_list app_list_box" v-for="item in customerInfoData" @click="userDetail(item)">
					<!--<img src="../../../../static/images/fuwukaxiangqing3.jpg" />-->
					<div class="txt_img">
						{{item.c_name[0]}}
					</div>
					<div class="communication_info">
						<div class="app_box_flex">
							<div class="app_box_content_left">
								{{item.c_campus_name}}
							</div>
							<div class="app_box_content_right" style="color: #FE4117;" v-if="item.c_follow_status == 0">
								待跟进
							</div>
							<div class="app_box_content_right" style="color: #FE4117;" v-if="item.c_follow_status == 1">
								跟进中({{item.followCount}})
							</div>
						</div>

						<div class="app_box_flex">
							<div class="app_box_content_left">
								<span class="T2">{{item.c_name}}</span>&nbsp;<span class="C4 T3">{{item.c_phone}}</span>
							</div>
							<div class="app_box_content_right C4" v-if="item.c_evaluation == 0">
								一类客户
							</div>
							<div class="app_box_content_right C4" v-if="item.c_evaluation == 1">
								二类客户
							</div>
							<div class="app_box_content_right C4" v-if="item.c_evaluation == 2">
								三类客户
							</div>
							<div class="app_box_content_right C4" v-if="item.c_evaluation == 3">
								四类客户
							</div>
							<div class="app_box_content_right C4" v-if="item.c_evaluation == 4">
								五类客户
							</div>
						</div>
					</div>
					<div class="communication_time C2 T3">
						<span class="app_float_left" v-if="!item.provinceName"><span class="C1">地址：暂无</span></span>
						<span class="app_float_left C4" v-else><span class="C1">地址：</span>{{item.provinceName ?item.provinceName:''}}{{item.cityName?item.cityName:''}}{{item.areaName?item.areaName:''}}{{item.c_address== null?'':item.c_address}}</span>
						<!--<span class="app_float_right">{{$common.getTimes(item.c_create_time)}}</span>-->
					</div>
					<div class="communication_time C2 T3" v-if="item.followInfo.cfr_create_time"> 
						<span class="app_float_left C4"><span class="C1">最近跟进：</span>{{followTypeData[item.followInfo.cfr_way]}}（{{item.followInfo.u_nickname}}）</span>
						<span class="app_float_right C4">{{$common.dateFormat("YYYY/MM/dd h:m",item.followInfo.cfr_create_time)}}</span>
					</div>
				</div>
			</div>
		</div>

	</div>
</template>

<script>
	import { mapState, mapMutations } from "vuex";

	export default {

		data() {
			return {
				oldCustomData:[],
                searchValue:"",
				followTypeData: ['电话跟进', '上门跟进', 'QQ跟进', '微信跟进', '短信跟进'],
			};
		},
		computed: {
			...mapState({
				customerInfoData: state => state.CustomerTypeModule.customerInfoData,
				tempSell: state => state.HomeModule.tempSell,
				tempSellAll: state => state.HomeModule.tempSellAll,
			}),
		},
		mounted() {

			this.initData()

		},
		methods: {
			searchAllAction(){
                this.searchValue = ""
                this.$store.commit("CustomerTypeModule/updateCustomerInfoData", this.oldCustomData);
                
            },
            searchAction(){
                console.log(this.searchValue);
                
                var tempData = [];
                for(var i=0;i<this.customerInfoData.length;i++){
                    if(this.customerInfoData[i].c_campus_name.indexOf(this.searchValue)!=-1){
                        tempData.push(this.customerInfoData[i])
                    }
                }
                
						this.$store.commit("CustomerTypeModule/updateCustomerInfoData", tempData);
            },

			//  ...mapMutations(["ShopIndexModule/updateIsShopGuide"]),

			initData() {

				var uids = this.$userData.getUID();
				if(this.tempSell) {
					uids = this.tempSell;
				}

				//是否是超管
				var isRoot = "/is_manager/0";
				//              
				if(this.tempSellAll.u_master_osid != undefined && this.tempSellAll.u_master_osid != null && this.tempSellAll.u_master_osid != '') {

					if(this.tempSellAll.is_group_leader == '1') {
						isRoot = '' +
							"/is_manager/0" +
							"/u_id/" + this.tempSellAll.u_id +
							"/os_id/" + this.tempSellAll.u_master_osid +
							"/u_type/" + this.tempSellAll.u_type +
							"/u_leader/" + this.tempSellAll.u_leader +
							"/evaluation_type/" + this.$route.query.type;
					} else {
						isRoot = '' +
							"/u_id/" + this.tempSellAll.u_id +
							"/os_id/" + this.tempSellAll.u_master_osid +
							"/is_manager/" + this.tempSellAll.u_is_manager +
							"/u_type/" + this.tempSellAll.u_type +
							"/u_leader/" + this.tempSellAll.u_leader +
							"/evaluation_type/" + this.$route.query.type;
					}
				} else {
					isRoot = '' +
						"/u_id/" + this.$userData.getUID() +
						"/os_id/" + this.$userData.getOsid() +
						"/is_manager/" + this.$userData.getIsManager() +
						"/u_type/" + this.$userData.getOsType() +
						"/u_leader/" + this.$userData.getLeader() +
						"/evaluation_type/" + this.$route.query.type;
				}

				this.$easyUtil.startLoading(this)
				this.$http.getHttp(
					this.$API.hierarchicalCustomerList + isRoot,
					rs => {
						var arrRes = Enumerable.From(rs.customerInfo).OrderByDescending(x => parseInt(x.cfr_createtime)).ToArray();
						this.$store.commit("CustomerTypeModule/updateCustomerInfoData", arrRes);
						this.oldCustomData = arrRes
						this.$easyUtil.endLoading(this)
						this.getNodeData(0, 0);
					}
				);
			},

			//用户详情
			userDetail(item) {
				this.$router.push({
					path: '/userDetail',
					query: {
						customerId: item.c_id,
						isShowStopCustom : false
					}
				})
			},
		}
	};
</script>

<style lang="stylus" scoped>
	@import '~PUBLIC_CSS';
	.search_box {
		line-height: 40px;
		background: #fff;
		text-align: center;
		display: flex;
		align-items: center;
	}
	
	.search_box .screen {
		flex: 1;
	}
	
	.search_box input {
		flex: 3;
		border-radius: 100px;
		border: 0;
		background: #f4f4f4;
		padding: 5px 10px;
		margin-left: 15px;
	}
	
	.search_box .search {
		flex: 1;
		color: #FBD415;
	}
	
	.top_menu {}
	
	.top_menu .app_box_content_right {
		text-align: center;
		border-right: 2px solid #f6f6f6;
		font-size: small;
		padding: 0;
	}
	
	.top_menu .app_box_content_right:last-child {
		border-right: 0;
	}
	
	.communication_list {
		overflow: hidden;
	}
	
	.communication_list .communication_info {
		float: initial;
	}
	
	.communication_list .communication_time {
		overflow: hidden;
		width: 100%;
	}
	
	.communication_list .communication_time .app_float_left {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 60%;
	}
	
	.communication_list .communication_time .app_float_right {
		/*border: 1px solid #fbd415;
        padding: 0 10px;
        line-height: initial;
        border-radius: 4px;
        margin-top: 5px;*/
	}
	
	.communication_list .txt_img {
		display: block;
		height: 40px;
		width: 40px;
		margin: 10px;
		margin-left: 0;
		text-align: center;
		line-height: 40px;
		background: #000;
		color: gold;
		float: left;
		border-radius: 100px;
		object-fit: cover;
	}
	
	.communication_list img {
		display: block;
		height: 50px;
		width: 70px;
		padding: 5px 10px 5px 0;
		float: left;
		object-fit: cover;
	}
</style>